.smaller {
  font-size: 0.7em;
}

.small {
  font-size: 0.9em;
}

.normal {
  font-size: 1.1em;
}

.large {
  font-size: 1.3em;
}

.larger {
  font-size: 1.5em;
}

.exam-options {
  padding: 1em 1.2em;
  font-size: 1.2em;
  opacity: 0.8;

  .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: .5em 0;
    min-height: 3em;
  }

  .number {
    flex-shrink: 0;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    border: #999 1px solid;
    border-radius: 50%;
  }

  .content {
    flex-shrink: 1;
    padding: 0 .5em;
  }

  .active {
    color: #fff;
    border: #fff 1px solid;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    &+.content {
      color: #66a6ff
    }
  }


  .error {
    color: #fff;
    border: #fff 1px solid;
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);

    &+.content {
      color: #fd868c
    }
  }

  .correct {
    color: #fff;
    border: #fff 1px solid;
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

    &+.content {
      color: #96e6a1
    }
  }

  .omit {
    color: #fff;
    border: #fff 1px solid;
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

    &+.content {
      color: #f6d365
    }
  }

  .confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14em;
    height: 2em;
    margin: 2em auto 0 auto;
    color: #fff;
    letter-spacing: .3em;
    border-radius: .8em;
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  }

  .hide {
    opacity: 0;
  }
}
